<template>
  <div class="sh_wrap" id="sh_wrap">
    <div class="sh_frame_box">
      <!-- <van-nav-bar title="掌上搜索" /> -->
      <!-- 搜索框组件 -->
      <search
        v-model="valueSerach"
        @returnBack="returnBack"
        @returnBack1="returnBack1"
        :placeholder="valueSerach"
        @inputValue="inputValue"
      />
    </div>
    <div class="sh_tabs">
      <!-- tab标题 置顶：sticky -->
      <van-tabs v-model="active" sticky>
        <van-tab title="达人">
          <SrarchTalent :valueSerach="valueSerach" v-if="active == 0" ref="refs1" />
        </van-tab>
        <van-tab title="商品">
          <SearchGoods :valueSerach="valueSerach" v-if="active == 1" ref="refs2" />
        </van-tab>
        <van-tab title="直播">
          <SearchLives :valueSerach="valueSerach" v-if="active == 2" ref="refs3" />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import search from '@/component/search'; // 搜索框
import IncludedBut from './IncludedBut.vue';
import SrarchTalent from './srarchTalent.vue'; // 达人
import SearchGoods from './searchGoods.vue'; // 商品
import SearchLives from './searchLives.vue'; // 直播
//  srarchTalent, searchGoods, searchLives
export default {
  components: { IncludedBut, SrarchTalent, SearchGoods, SearchLives, search },
  data() {
    return {
      active: 0,
      showPage: true,
      valueSerach: '', //搜索文案
      listLoading: false, //列表搜索loading
      searchLog: [], //搜索记录
      searchImg: false
    };
  },
  props: {},
  watch: {
    active(newValue) {
      // this.valueSerach = '';
      if (window.pageYOffset != 0) {
        window.pageYOffset = 10;
      }
    }
  },
  beforeRouteEnter(to, from, next) {
    // console.log(to);
  //判断从index页面进入，将list的isFirst设置为true
  //这样就可以请求数据了
    if(from.name == 'addIndexed' || from.name == 'talentDetailsMain' || from.name == 'goodsDetailsMain' || from.name == 'LiveForDetailsMain' ){
      to.meta.isFirst = false;
    }else{
      to.meta.isFirst = true;
    }
    // if (from.name == 'searchIndex') {
    //   to.meta.isFirst = true;
    // }else{
    //   to.meta.isFirst = false;
    // }
    next();
  },
  activated(){
    let keyWord = this.$route.query.name;
    if(this.$route.meta.isFirst){
      let qVal = Number(this.$route.query.value);
      if(qVal){  //如果路由query没有指定tab选项则默认为第一个
        this.active = qVal;
      }else{
        this.active = 0;
      }
      this.returnBack(keyWord);
    }
  },
  computed: {},
  created() {
    if(this.$route.query.value){
      this.active = Number(this.$route.query.value);
    }
    if(!this.$route.meta.isFirst){  //如果是刷新当前页面，测需要传入搜索关键字，否则valueSerach为空；
      this.valueSerach = this.$route.query.name;
      console.log(this.valueSerach);
    }
  },
  mounted() {},
  methods: {
    setSearchlog(){
      this.$axios
        .get("/api/customer/RecordSearchLog", {
          params: {
            key: this.valueSerach,
          },
        })
        .then((res) => {
          // console.log(res);
        });
    },
    inputValue(keyVal){
      // console.log(keyVal);
      this.valueSerach = keyVal;
    },
    returnBack(a) {
      this.valueSerach = this.trimStr(a);
      this.$nextTick(()=>{
        if (this.active == 0) {
            this.$refs.refs1.search(this.valueSerach);
        } else if (this.active == 1) {
          this.$refs.refs2.search(this.valueSerach);
        } else {
          this.$refs.refs3.search(this.valueSerach);
        }
        this.setSearchlog();
      });
    },
    returnBack1(a) {
      if (a) {
        // 搜索框为空时重新调接口
        if (this.active == 0) {
          this.$refs.refs1.search(a);
        } else if (this.active == 1) {
          this.$refs.refs2.search(a);
        } else {
          this.$refs.refs3.search(a);
        }
      }
      // this.setSearchlog();
    },

    // 搜索 达人,商品,直播
    searchEvent() {
      // if (this.search) {
      //   this.listLoading = true;
      //   this.showPage = false;
      //   // this.$router.push({ path: '/searchHistory', query: { value: 0,name:this.search } })
      //   let newQuery = JSON.parse(JSON.stringify(this.$route.query));
      //   newQuery.name = this.search;
      //   if (this.$route.query.name != this.search) {
      //     this.$router.replace({
      //       query: newQuery,
      //     });
      //   }
      // }
      // if (!this.search) {
      //   this.showPage = true;
      // }
    },

    // 获取历史搜索记录
    getSearchLog() {
      this.$axios.get('/api/customer/GetSearchLog').then(res => {
        this.searchLog = res.data.data;
      });
    },

    // 删除记录
    // /api/customer/DeleteSearchLog?ids=297
    deleteSearchLog() {
      let itemLod = '';
      this.searchLog.forEach(item => {
        itemLod += item.id + ',';
      });
      itemLod = itemLod.substring(0, itemLod.lastIndexOf(','));
      this.$axios
        .get('/api/customer/DeleteSearchLog', {
          params: {
            ids: itemLod
          }
        })
        .then(res => {
          this.getSearchLog();
        });
    },

    // 历史记录每一项的点击搜索
    itemSearch(name) {
      this.search = name;
    },

    routeData() {
      if (this.$route.query.name) {
        // this.active = Number(this.$route.query.value);
        this.search = this.$route.query.name;
        this.searchEvent();
      }
    }
  }
};
</script>

<style scoped lang="less">
.sh_wrap {
  min-height: 100vh;
  background-color: #f1f1f1;
  display: flex;
  flex-direction: column;
}
.sh_frame_box {
  background-color: #fff;
  padding-top: 10px;
  .boxseach {
    background: #fff;
    width: 100%;
    background: #f1f1f1;
    display: flex;
    border-radius: 0.453333rem;
    .seach {
      width: 85%;
      height: 0.906667rem;
      border-radius: 0.453333rem;
      border: none;
      background: #f1f1f1;
      font-size: 0.33rem;
      color: #222;
      padding-left: 0.426667rem;
      box-sizing: border-box;
    }
    .search_img_box {
      width: 15%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .imgseach {
      width: 0.4rem;
      height: 0.4rem;
    }
  }
}
.sh_record_box {
  padding: 0 0.4rem;
  padding-top: 0.68rem;
  background-color: #fff;
  flex: 1;
  .shr_tlt_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .shr_tlt {
      font-size: 0.4rem;
      color: #222222;
      font-weight: 600;
    }
    .shr_delete {
      width: 1.333333rem;
      text-align: right;
    }
    img {
      width: 0.426667rem;
      height: 0.426667rem;
    }
  }
  .no_data {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 2.666667rem;
    img {
      width: 4rem;
      height: 2.8rem;
    }
    .zw {
      font-size: 0.346667rem;
      color: #888888;
    }
  }
}
.sh_record_item {
  display: flex;
  flex-wrap: wrap;
  .shr_box {
    padding: 0.226667rem 0.4rem;
    font-size: 0.346667rem;
    color: #555555;
    background-color: #f7f7f7;
    border-radius: 0.133333rem;
    margin-right: 0.4rem;
    margin-top: 0.4rem;
    word-break: break-all;
  }
}

.sh_tabs {
  flex: 1;
  /deep/.van-tabs {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  /deep/.van-tabs__line {
    width: 0.533333rem;
    background-color: #fd7f2c;
  }
  /deep/.van-tabs__content {
    padding: 0 0.4rem;
    box-sizing: border-box;
    background-color: #f1f1f1;
    padding-bottom: 0.8rem;
  }
  // 达人列表
  .sh_talent {
    width: 100%;
    height: 1.72rem;
    margin-top: 0.266667rem;
    background-color: #fff;
    border-radius: 0.133333rem;
    display: flex;
    align-items: center;
    padding-left: 0.266667rem;
    box-sizing: border-box;
    .sh_talent_i {
      width: 1.173333rem;
      height: 1.173333rem;
      border-radius: 50%;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .sh_talent_r {
      margin-left: 0.266667rem;
      .t {
        width: 6.666667rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.4rem;
        color: #222222;
      }
      .b {
        margin-top: 0.053333rem;
        font-size: 0.32rem;
        color: #888888;
      }
    }
  }
  // 商品列表
  .sh_goods {
    width: 100%;
    height: 1.72rem;
    margin-top: 0.266667rem;
    background-color: #fff;
    border-radius: 0.133333rem;
    display: flex;
    align-items: center;
    padding-left: 0.266667rem;
    box-sizing: border-box;
    .sh_goods_i {
      width: 1.173333rem;
      height: 1.173333rem;
      border-radius: 0.266667rem;
      img {
        width: 100%;
        height: 100%;
        border-radius: 0.266667rem;
      }
    }
    .sh_goods_r {
      margin-left: 0.266667rem;
      .t {
        width: 6.666667rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.4rem;
        color: #222222;
      }
      .b {
        margin-top: 0.053333rem;
        font-size: 0.426667rem;
        color: #fd7f2c;
        font-family: Dinpro-medium;
        span {
          font-size: 0.346667rem;
        }
      }
    }
  }
  // 直播列表
  .sh_live {
    width: 100%;
    height: 1.72rem;
    margin-top: 0.266667rem;
    background-color: #fff;
    border-radius: 0.133333rem;
    display: flex;
    align-items: center;
    padding-left: 0.266667rem;
    box-sizing: border-box;
    .sh_live_i {
      width: 1.173333rem;
      height: 1.173333rem;
      border-radius: 0.266667rem;
      img {
        width: 100%;
        height: 100%;
        border-radius: 0.266667rem;
      }
    }
    .sh_live_r {
      margin-left: 0.266667rem;
      .t {
        width: 6.666667rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.4rem;
        color: #222222;
      }
      .b {
        margin-top: 0.053333rem;
        font-size: 0.32rem;
        color: #888888;
      }
    }
  }
  // 暂无数据
  .no_data {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 2.666667rem;
    img {
      width: 4rem;
      height: 2.8rem;
    }
    .zw {
      font-size: 0.346667rem;
      color: #888888;
    }
  }
  .tld_list_nodata {
    width: 100%;
    height: 6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      width: 4rem;
      height: 2.8rem;
    }
    .zw {
      font-size: 0.346667rem;
      color: #888888;
    }
  }
  .addIdn {
    width: 2.346667rem;
    height: 0.8rem;
    background-color: #fd7f2c;
    border-radius: 0.133333rem;
    font-size: 0.346667rem;
    color: #ffffff;
    border: none;
    margin-top: 0.533333rem;
    display: flex;
    line-height: 0.8rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    img {
      margin-right: 0.12rem;
      align-self: center;
      width: 0.32rem;
      height: 0.32rem;
    }
  }
  .theend {
    font-size: .32rem;
    text-align: center;
    color: #888;
    padding-top: 0.8rem;
    span {
      color: #fd7f2c;
    }
  }
}
</style>
